<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件  cdns--> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!--字体图标-->
<link rel="stylesheet" href="./css/iconfont/iconfont.css"/>
</head>
<body>
     <div class="container header">
        <div class="row">
            <div class="col-md-12">header</div>
        </div>
     </div>
     <div class="container">
            <!-- Table -->
        
              <div class="row box" >
              
               <form action="" method="GET" >
                <div class="col-md-3">
                        <div class="input-group">
                            <span class="input-group-addon">课程名称</span>
                            <input type="text" class="form-control" placeholder="Twitterhandle">
                        </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">状态</span>
                        <input type="text" class="form-control" placeholder="Twitterhandle">
                    </div>
                </div>
                
                <div class="col-md-2">
                  <button class="btn btn-success btn-sm">查询</button>
                </div>
                
                <div class="col-md-2 col-md-offset-2">
                    <button type="button" class="btn btn-success">创建课程</button>
                </div>
              </form>  
            </div>
          

          
            <table class="table text-center">
                    <thead class="text-center">
                      <tr>
                        <th>id</th>
                        <th>课程名称</th>
                        <th>价格</th>
                        <th>排序</th>
                        <th>状态</th>
                        <th>操作</th>
                        
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>0</td>
                        <td>Bangalore</td>
                        <td><span class="iconfont text-danger size">&#xe604;</span></td>
                        <td>
                          <button class="btn btn-sm btn-danger">下架</button>
                          <button class="btn btn-sm btn-default">营销信息</button>
                          <button class="btn btn-sm btn-default">内容管理</button>
                        </td>
                      </tr>
                      <tr>
                          <td>Tanmay</td>
                          <td>Bangalore</td>
                          <td>0</td>
                          <td>Bangalore</td>
                          <td><span class="iconfont text-danger size">&#xe604;</span></td>
                          <td>
                            <button class="btn btn-sm btn-danger">下架</button>
                            <button class="btn btn-sm btn-default">营销信息</button>
                            <button class="btn btn-sm btn-default">内容管理</button>
                          </td>
                        </tr>
                    </tbody>
            </table>
     </div>
</body>
</html>
<style>
   .container{
       background: #d6d3d3;
   }
   .header{
      margin-top: 20px;
      height: 50px;
      background:rgb(190, 186, 186);
   }
   .box{
     padding: 20px 0 30px 20px;
   }
   .size{
      font-size: 20px;
      
   }

.table tbody tr td{
   vertical-align: middle;
 }

 .table thead>tr>th {
    text-align: center;
}
</style>
<script>
  $(function () {
  $.ajax({
      url:"http://localhost:8080/lagou_edu_war/",
      date:{//向后端发送的参数
          methodName:'findCourseList'
      },
      success:function (res){
          console.log(res)
      },
      error:function (err){
          console.log(err)
      }
  })
}) 
</script>